<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动端开发主流方案</title>
  <style>
    .content-box {
      box-sizing: content-box;
      width: 100px;
      height: 100px;
      background-color: antiquewhite;
      padding: 10px;
    }

    .border-box {
      box-sizing: border-box;
      width: 100px;
      height: 100px;
      background-color: aqua;
      padding: 10px;
    }
  </style>
</head>

<body>
  <h3>一. 移动端开发选择</h3>
  <ol>
    <li>单独制作移动端页面(主流), 如京东(m.jd.com)/淘宝触屏版(m.taobao.com)/苏宁易购手机版(m.suning.com)/小米商城触屏版(mi.com/m)</li>
    <code>流式布局(百分比布局)/flex 弹性布局(推荐)/less+rem+媒体查询布局/混合布局</code>
    <li>响应式页面兼容移动端(其次), 如三星手机官网(samsungeshop.com.cn), 但是制作繁杂, 需要不断测试兼容性</li>
    <code>媒体查询/bootstrap</code>
  </ol>

  <h3>二. 移动端技术解决方案</h3>
  <h4>1. 移动端浏览器基本以 -webkit- 内核为主</h4>

  <h4>2. 移动端 css 初始化推荐使用 normalize.css </h4>
  <ul>
    <li>保护了有价值的默认值</li>
    <li>修复了浏览器 bug</li>
    <li>模块化</li>
    <li>有详细的开发文档</li>
  </ul>

  <h4>3. css3 盒子模型 (若不考虑PC端兼容, 则移动端推荐使用css3盒子!)</h4>
  <code>
     css3盒子模型 <br>
    box-sizing: border-box; 盒子宽度 width 包含了 border + padding <br>
     传统盒子模型 <br>
    box-sizing: content-box; 盒子宽度 = width + border + padding <br>
  </code>
  <div class="content-box"></div>
  <div class="border-box"></div>

  <h4>4. 特殊样式</h4>
  <code>
    /* CSS3 盒子模型 */ <br>
    box-sizing: border-box; <br>
    -webkit-box-sizing: border-box; <br>
    /* 清除点击高亮背景 */ <br>
    -webkit-tap-highlight-color: transparent; <br>
    /* 清除默认的按钮和输入框样式 (IOS适配) */ <br>
    -webkit-appearance: none; <br>
    /* 禁用长按图片和链接时的弹出菜单 */ <br>
    img,a { -webkit-touch-callout: none; }
  </code>
</body>

</html>